<!-- 队长开仓 -->
<template>
    <div>
        <div class="content">
            <div class="content-item-top">
                <el-tabs
                    v-model="activeName"
                    class="demo-tabs-1"
                    @tab-change="handleClick"
                >
                    <el-tab-pane label="市价" name="1">

                        <!-- 可用余额 -->
                        <p class="text">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="除去订单和仓位保证金后的余额"
                                placement="top"
                            >
                                可用余额:
                            </el-tooltip>
                            &nbsp;<span>{{ account.available }}</span></p>
                        <p class="text">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="开仓所需的初始保证金"
                                placement="top"
                            >
                                仓位保证金:
                            </el-tooltip>
                            &nbsp;<span>{{ account.position_initial_margin }}</span></p>
                        <!-- 输入开仓数量 -->
                        <div class="order-item-size">
                            <div class="label-text">
                                <span class="label">合约数量:</span>
                                <el-input-number v-model="creatOrderOperation.size" :min="0" :step="1" :max="100" @change="handleChange" />
                            </div>
                        </div>
                        <div class="order-item-price">
                            <div class="label-text">
                                <p class="text">开仓价格:</p>
                            </div>
                            <div class="label-text-btn">
                                市价
                            </div>
                        </div>
                        <div class="order-item-price">
                            <div class="label-text">
                                <p class="text">
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        content="市价单当前只支持 ioc 模式"
                                        placement="top"
                                    >
                                        策略选择:&nbsp;&nbsp;ioc
                                    </el-tooltip>
                                </p>
                            </div>
                        </div>

                        <div class="order-item-oprater">
                            <div class="label-text">
                                <p class="text">开仓操作:</p>
                            </div>
                            <div class="item">
                                <div class="btn green" @click="openPosition(1,'t-kaiduo-shijia',false)">
                                    <div class="center">开多</div>
                                    <div class="right">看涨</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="btn red">
                                    <div class="center" @click="openPosition1(-1,'t-kaikong-shijia',false)">开空</div>
                                    <div class="right">看跌</div>
                                </div>
                            </div>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="限价" name="2">

                        <!-- 可用余额 -->
                        <p class="text">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="除去订单和仓位保证金后的余额"
                                placement="top"
                            >
                                可用余额:
                            </el-tooltip>
                            &nbsp;<span>{{ account.available }}</span></p>
                        <p class="text">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="开仓所需的初始保证金"
                                placement="top"
                            >
                                仓位保证金:
                            </el-tooltip>
                            &nbsp;<span>{{ account.position_initial_margin }}</span></p>
                        <!-- 输入开仓数量 -->
                        <div class="order-item-size">
                            <div class="label-text">
                                <span class="label">合约数量:</span>
                                <el-input-number v-model="creatOrderOperation.size" :min="0" :step="1" :max="100" @change="handleChange" />
                            </div>
                        </div>

                        <div class="order-item-price">
                            <div class="label-text">
                                <p class="text">开仓价格(限价):</p>
                            </div>
                            <el-input
                                    v-model="creatOrderOperation.price"
                                    size="large"
                                    style="text-align: center;"
                                    placeholder="请输入开仓价格"
                                    @input="handleChangeInput"
                            >
                            <template #prepend>价格(USDT)</template>
                            </el-input>
                        </div>
                        <div class="order-item-price">
                            <div class="label-text">
                                <p class="text">开仓策略(限价):</p>
                            </div>
                            <el-select v-model="creatOrderOperation.tif" placeholder="请选择策略" size="large" style="width: 320px;">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                            </el-select>
                        </div>

                        <div class="order-item-oprater">
                            <div class="label-text">
                                <p class="text">开仓操作【限价】:</p>
                            </div>
                            <div class="item">
                                <div class="btn green" @click="openPosition(1,'t-kaiduo-xianjia','limit')">
                                    <div class="center">开多</div>
                                    <div class="right">看涨</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="btn red" @click="openPosition1(-1,'t-kaikong-xianjia','limit')">
                                    <div class="center">开空</div>
                                    <div class="right">看跌</div>
                                </div>
                            </div>
                        </div>

                    </el-tab-pane>
                    {{ store.creatOrderOperation }}
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import { captainOprate } from "@/store/captainOprate.js"
import { onMounted , reactive} from "vue"

const store = captainOprate()
const activeName = store.activeName_sub_1
const account = reactive(store.account)
const creatOrderOperation = reactive(store.creatOrderOperation)
const options = reactive(store.options)

function handleClick(tab) {
    store.updatedActiveNameSub1(tab)
    store.clearInterval()
}
function handleChange(){
    store.updatedaOrderSize(creatOrderOperation.size)
}


onMounted(() => {
})

</script>

<style lang="scss" scoped>

</style>